<style>
    .special {
        color: #5E7CE0;
        text-decoration: underline;
    }
    .special:hover {
        color: #7E96E6
    }

    .qrcode-inner {
        margin-top: 25px;
        margin-left: 50px;
        width: 100px;
        height: 100px;
        background-color: #00f7de;
    }
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form" action="" lay-filter="search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">短链</label>
                            <div class="layui-input-inline">
                                <input type="text" name="surl" id="surl" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createdAt" id="createdAt" autocomplete="off"
                                       placeholder="yyyy-MM-dd" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status" id="status" lay-filter="status">
                                    <option value="">请选择</option>
                                    <option value="0">启用</option>
                                    <option value="1">停用</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon layui-icon-search"></i>搜 索
                            </button>
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-reset-btn">
                                <i class="layui-icon layui-icon-refresh"></i> 重 置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div class="layuimini-table">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-qrcode" lay-event="qrcode">二维码</a>
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="urlStatus" value="{{= d.id }}" lay-skin="switch" lay-text="启用|停用"
           lay-filter="urlStatusDemo" {{= d.status== 0 ? "checked" : "" }}>
</script>

<script type="text/html" id="addDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="add-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">原始链接</label>
                <div class="layui-input-block">
                    <input type="text" name="originalUrl" lay-verify="required" lay-reqtext="原始链接不能为空"
                           placeholder="请输入原始链接" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">过期时间</label>
                <div class="layui-input-block">
                    <input type="text" name="expireDate" lay-verify="required" lay-reqtext="过期时间不能为空" autocomplete="off"
                           placeholder="yyyy-MM-dd" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status" lay-filter="status" lay-verify="required" lay-reqtext="状态不能为空">
                        <option value="0">启用</option>
                        <option value="1">停用</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="addSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeAddDialog">取消</button>
            </div>
        </form>
    </div>
</script>

<script type="text/html" id="editDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="edit-form" id="edit-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">短链ID</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" name="id" style="word-break: break-all"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">过期时间</label>
                <div class="layui-input-block">
                    <input type="text" name="expireDate" lay-verify="required" lay-reqtext="过期时间不能为空" autocomplete="off"
                           placeholder="yyyy-MM-dd" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-submit lay-filter="editSaveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" lay-filter="closeEditDialog">取消</button>
            </div>
        </form>
    </div>
</script>

<script type="text/html" id="qrcodeDialog">
    <div>
        <div id="qrCodeDiv" class="qrcode-inner"> </div>
    </div>
</script>

<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;

        // 日期
        laydate.render({
            elem: '#createdAt'
        });

        form.render('select', 'search-form');

        var currTable = table.render({
            elem: '#currentTableId',
            url: '/tenant/url/query',
            method: 'post',
            contentType: 'application/json',
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalCount,
                    "data": res.data.records
                };
            },
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {field: 'id', width: '10%', title: 'ID', sort: true, align: 'center', fixed: 'left'},
                {
                    field: 'surl', width: '6%', title: '短链', templet: function (d) {
                        return `<a class="special" href="javascript:;" lay-event="copy" onmouseover="showTip(this)" onmouseleave="closeTip(this)">${d.surl}</a>`
                    }
                },
                {field: 'lurl', width: '20%', title: '原始链接'},
                {field: 'visits', width: '10%', title: '访问次数', align: 'center'},
                {field: 'createdAt', title: '创建时间', width: '10%'},
                {field: 'expireTime', title: '过期时间', width: '10%'},
                {field: 'status', title: '状态', width: '10%', align: 'center', templet: '#switchTpl'},
                {field: 'remark', width: '10%', title: '备注信息'},
                {title: '操作', width: '14%', toolbar: '#currentTableBar', align: "center"}
            ]],
            autoSort: false,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // 执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "surl": '',
                "createdAt": '',
                "status": '',
            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听启用/停用操作
        form.on('switch(urlStatusDemo)', function (obj) {
            console.log(this.value + ' ：' + this.name + '：' + obj.elem.checked);
            if (obj.elem.checked == true) {
                AjaxUtil.get({
                    url: '/tenant/url/enable?id=' + this.value,
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    }
                });
            } else {
                AjaxUtil.get({
                    url: '/tenant/url/disable?id=' + this.value,
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    }
                });
            }
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') { // 监听添加操作
                var index = layer.open({
                    title: '新增短链',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '580px', // 宽度580, 高度自适应
                    content: $('#addDialog').html(),
                    success: function (layero, dIndex) {
                        form.render('select', 'add-form');
                        // 日期
                        laydate.render({
                            elem: layero.find("[name='expireDate']")
                        });
                        // 表单提交事件
                        form.on('submit(addSaveBtn)', function (data) {
                            AjaxUtil.postJSON({
                                url: '/tenant/url/add',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code == '0') {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        $("button[lay-filter='closeAddDialog']").click(function () {
                            layer.close(dIndex);
                            return false;
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
            }
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var lineData = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑短链',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '580px', // 宽度580, 高度自适应
                    content: $('#editDialog').html(),
                    success: function (layero, dIndex) {
                        laydate.render({
                            elem: layero.find("[name='expireDate']"),
                            value: lineData.expireTime.substring(0, 10)
                        });
                        layero.find("[name='id']").text(lineData.id);
                        // 表单提交事件
                        form.on('submit(editSaveBtn)', function (data) {
                            data.field.id = lineData.id;
                            AjaxUtil.postJSON({
                                url: '/tenant/url/edit',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code == '0') {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                }
                            });
                            return false;
                        });

                        // 监听取消按钮
                        $("button[lay-filter='closeEditDialog']").click(function () {
                            layer.close(dIndex);
                            return false;
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        currTable.reload();
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除此短链吗', function (index) {
                    layer.close(index);
                    AjaxUtil.get({
                        url: '/tenant/url/del?id=' + lineData.id,
                        success: function (res) {
                            if (res.code == '0') {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    currTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        }
                    });
                });
            } else if (obj.event === 'copy') {
                handleClipboard(lineData.surl)
            } else if (obj.event === 'qrcode') {
                var index = layer.open({
                    title: '二维码',
                    type: 1,
                    shade: 0.2,
                    shadeClose: false,
                    area: ['200px', '200px'],
                    content: $('#qrcodeDialog').html(),
                    success: function (layero, dIndex) {
                        var originalDOM = layero.find("#qrCodeDiv");
                        var qrCode = new QRCode(originalDOM.get(0), {
                            text: lineData.intactUrl, //text必须是字符串
                            width: 100,
                            height: 100,
                            colorDark: "#333333", //二维码颜色
                            colorLight: "#ffffff", //二维码背景色
                            correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                        });
                    },
                    end: function (index) {

                    }
                });

            }
        });


        function handleClipboard(text) {
            const oInput = document.createElement('input');
            oInput.value = text;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';// 设置class名
            document.getElementsByClassName("oInput")[0].remove();// 移除这个input
            layer.msg('已复制到粘贴板');
        }

        var layerTipIndex
        window.showTip = function(t) {
            var row = '点击复制链接';
            //小tips
            layerTipIndex = layer.tips(row,t,{
                tips:[1,'#5E7CE0'],
                time:4000
            })
        }

        window.closeTip = function (t) {
            layer.close(layerTipIndex);
        }
    });
</script>